<template>
  <div class="bg-white rounded-lg shadow p-4 lg:p-6">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-xl font-semibold text-gray-700">网站基本信息</h2>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">公司名称</label>
        <input v-model="modelValue.companyName" type="text"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">标语</label>
        <input v-model="modelValue.slogan" type="text"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Logo路径</label>
        <input v-model="modelValue.logo" type="text"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <!-- 上传图片组件，不知道怎么回显，先注释了 -->
        <!-- <ImageUpload class="w-50 h-50" :uploadUrl="modelValue.logo || ''" @upload-success="uploaded"
          key="SiteInfo.logo" /> -->
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">背景渐变类</label>
        <input v-model="modelValue.gradient" type="text"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { SiteInfo } from '~/types/home';
import ImageUpload from '~/components/ImageUpload.vue'


const props = defineProps<{
  modelValue: SiteInfo;
}>()
const emit = defineEmits(['update:modelValue'])

function uploaded(res: any, index: number) {
  let data = res.response.data
  let url = data[0].filePath
  props.modelValue.logo = url
  emit('update:modelValue', props.modelValue)
}

</script>